<script setup lang="ts">
import dayjs from "dayjs";
import type { HistoryItemProps } from "../hooks/useHistory";
interface Props {
  showDelete?: boolean;
  list?: HistoryItemProps[];
}
const props = withDefaults(defineProps<Props>(), {
  showDelete: false,
  list: () => []
});
const fomatTime = (time: string) => {
  return dayjs(time).format("YYYY-MM-DD hh:mm:ss");
};
const emit = defineEmits(["showDel", "del", "select"]);
</script>

<template>
  <Flex class="header" justify="space-between">
    <view class="title">历史聊天</view>
    <uv-icon
      :name="props.showDelete ? 'trash-fill' : 'trash'"
      v-if="props.list.length"
      @click="emit('showDel')"
    ></uv-icon>
  </Flex>
  <view class="list">
    <view
      class="message"
      v-for="(item, index) in props.list"
      :key="item.id"
      @click="emit('select', item.rb_robot.id)"
    >
      <view class="title">{{ item.last_msg.question }}</view>
      <Flex justify="space-between">
        <text>{{ item.rb_robot.nickname }}</text>
        <text>{{ fomatTime(item.created_at) }}</text>
      </Flex>
      <view
        class="del-button"
        v-show="props.showDelete"
        @click.stop="emit('del', item.id, item.rb_robot.id)"
      >
        <uv-icon name="close" color="#fff" size="12px"></uv-icon>
      </view>
    </view>
    <uv-empty
      mode="list"
      v-if="!props.list.length"
      text="暂无历史记录"
    ></uv-empty>
  </view>
</template>

<style lang="scss" scoped>
.del-button {
  position: absolute;
  right: 0;
  top: 0;
  background-color: #ff4848;
  border-bottom-left-radius: 100%;
  padding: 5px;
}
.header {
  padding-top: 54px;
  width: 100%;
  margin-bottom: 24px;
  .title {
    color: #19191c;
    font-size: 17px;
  }
}
.list {
  .message {
    position: relative;
    box-sizing: border-box;
    padding: 16px;
    background-color: #f2f4ff;
    border-radius: 10px;
    color: #6c6d7b;
    font-size: 12px;
    overflow: hidden;
    .title {
      font-size: 14px;
      margin-bottom: 9px;
      color: #19191c;
      font-weight: 500;
    }
    &:not(:last-child) {
      margin-bottom: 8px;
    }
  }
}
</style>
